<template>
  <div>
    <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="default" @click="dialogFormVisible = !dialogFormVisible">新增</el-button>

      </div>
      <el-table :data="list" border stripe>
        <el-table-column
          prop="addressName"

          label="地址名称"
        />
        <el-table-column
          prop="addressName"

          label="默认发货地址"
        >
          <template v-slot="scope">
            默认发货地址 <el-switch v-model="scope.row.sendStatus" :active-value="true" :inactive-value="false" @change="" />

          </template>
        </el-table-column>
        <el-table-column
          prop="name"

          label="收货人姓名"
        />
        <el-table-column
          prop="phone"

          label="收货人电话号码"
        />
        <el-table-column
          prop="phone"

          label="操作"
        >
          <template v-slot="scope">

            <el-button type="primary" size="default" @click="edit(scope.row)">地址编辑</el-button>
          </template>

        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog title="地址详情" :visible.sync="dialogFormVisible" @close="close">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="地址名称">
          <el-input v-model="form.addressName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收获人姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="form.postCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收货地址">
          <el-cascader
            v-model="selectedOptions"
            size="large"
            :options="regionData"
            @change="selectAddress"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.detailAddress" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addressList,
  save,
  update
} from '@/api/orderManage/address/index'
import { regionData, codeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      regionData,
      selectedOptions: [],
      form: {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'createTime': '',
        'detailAddress': '',
        'id': '',
        'modifyTime': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': '',
        'region': '',
        'sendStatus': ''
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    close() {
      console.log('弹窗关闭')
      // this.$refs.form.resetFields()
      this.form = {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'createTime': '',
        'detailAddress': '',
        'id': '',
        'modifyTime': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': '',
        'region': '',
        'sendStatus': ''
      }
      this.selectedOptions = []
    },
    edit(val) {
      this.form = val
      this.selectedOptions = val.cityCode.split(',')
      this.dialogFormVisible = !this.dialogFormVisible
    },
    init() {
      addressList()
        .then(res => {
          res.data.items.forEach(ele => {
            ele.sendStatus = !!ele.sendStatus
          })
          this.list = res.data.items
        })
    },
    confirm() {
      var formData = JSON.parse(JSON.stringify(this.form))
      formData.sendStatus = formData.sendStatus ? 1 : 0
      if (this.form.id) {
        update(formData)
          .then(res => {
            this.dialogFormVisible = !this.dialogFormVisible
            this.init()
          })
      } else {
        save(formData)
          .then(res => {
            this.dialogFormVisible = !this.dialogFormVisible
            this.init()
          })
      }
    },
    selectAddress(val) {
      console.log(val)
      console.log(codeToText[val[0]])
      console.log(codeToText[val[1]])
      console.log(codeToText[val[2]])
      this.form.province = codeToText[val[0]]
      this.form.city = codeToText[val[1]]
      this.form.region = codeToText[val[2]]
      this.form.cityCode = val.join(',')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
